<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container>
    <lg-table :schema="schema" v-bind="tableProps">
      <!-- 工具栏 -->
      <template #toolbar-left>
        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-add v-if="$has.permit('add')" @click="editRef.open()" />
          <btn-tool-remove @click="remove()" />
          <btn-tool-export @click="exports" />
          <btn-tool-import @click="imports" />
          <t-button @click="updateStatus(1)">锁定</t-button>
          <t-button @click="updateStatus(2)">禁用</t-button>
          <t-button @click="updateStatus(0)">启用</t-button>
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <lg-button-list :limit="$RowBtnLimit">
          <btn-row-view @click="detailRef.open(row)" />
          <btn-row-update @click="editRef.open({ id: row.id })" />
          <btn-row-remove @click="remove(row.id)" />
          <a v-if="row.status !== 1" @click="updateStatus(1, row.id)">锁定</a>
          <a v-if="row.status !== 2" @click="updateStatus(2, row.id)">禁用</a>
          <a v-if="row.status !== 0" @click="updateStatus(0, row.id)">启用</a>
        </lg-button-list>
      </template>
      <!-- 插槽 -->
    </lg-table>
    <edit ref="editRef" @ok="reload()" />
    <detail ref="detailRef" />
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { LgButtonList, LgTable, useTable } from '@/soar';
import schema from './schema';
import api from './api';
import Edit from './Edit.vue';
import Detail from './Detail.vue';

// 使用表格
const editRef = ref();
const detailRef = ref();

const { exports, imports, remove, reload, tableProps, handleBatch } = useTable<any>({
  api,
  props: {
    orderBys: ['id'],
    actionbar: {
      width: 100,
    },
  },
});

function updateStatus(status, id?: string) {
  handleBatch(
    (ids) => `是否${['启用', '锁定', '禁用'][status]}${ids.length}个用户`,
    (ids) => api.updateStatus({ status, ids }),
    id,
  );
}
</script>

<style lang="less" scoped>
:deep(.lg-table-dict) {
  &.dict-value-0 {
    color: var(--app-color-primary);
    border-color: var(--app-color-primary);
  }
  &.dict-value-1 {
    color: var(--td-error-color-7);
    border-color: var(--td-error-color-7);
  }
  &.dict-value-2 {
    color: var(--td-success-color-7);
    border-color: var(--td-success-color-7);
  }
}
</style>
